<template>
  <div style="height: 800px;">
    <el-container>
      <el-header> <div class="thecenterbody">
      <div><img :src="UserDate.avatar" alt="头像" /></div>
    <div><h3>{{UserDate.name}}</h3>
    <span class="spanicon"><el-icon><CircleCheckFilled /></el-icon>实名认证用户</span>
  <p>{{UserDate.address}}</p>
  <!-- <el-button type="primary" plain size="small">
    <el-icon><EditPen /></el-icon>
    编辑</el-button> -->
  </div>  
    </div></el-header>
      <el-container>
        <el-aside width="200px">
          <h2 class="person_body_list" style="border-bottom: none"
              >个人中心</h2
            >
          <el-menu
          router
        default-active="/mineself"
        active-text-color="#00c3ff"
        class="el-menu-vertical-demo"
      >
         <el-menu-item index="/mineself">
          <el-icon><User /></el-icon>
          <span>个人信息</span>
        </el-menu-item>
        <el-menu-item index="/order">
          <el-icon><setting /></el-icon>
          <span>预约信息</span>
        </el-menu-item>
        <el-menu-item index="/myarticle">
          <el-icon><document /></el-icon>
          <span>论坛信息</span>
        </el-menu-item>
        <el-menu-item index="/vaccinate">
          <el-icon><setting /></el-icon>
          <span>接种信息</span>
        </el-menu-item>
      </el-menu>
        </el-aside>
        <el-main style="overflow-y: hidden"> <router-view></router-view></el-main>
      </el-container>
    </el-container>
   
    
  </div>
  
</template>

<script>
export default {
  name: "Personl",
  data() {
      return {
        ruleForm: {
         
        },
        localinfo:"https://img1.baidu.com/it/u=1056497728,1432074733&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        

        UserDate: {

        },
      }
      },
    methods: {
      getuserDate() {
      //获取当前用户名和头像用*分隔开
      let token = localStorage.getItem("token");
      this.$http.post("/inoculations/user/getTokenId",token).then((res) => {
        if (res.statusCode == "200") {
          this.UserDate = res.data;
          console.log(res.data);
          this.$store.state.UserId = res.data.idcard;
          this.$store.state.UserName = res.data.name;
          // console.log(res.data.split("*")[0])//则取*号之前的
          // console.log("*号之后的"+res.data.split("*")[1])//则取*号之后的
          // console.log(res.data);
          //this.localName = res.data.split("*")[0];
          //this.localinfo = res.data.split("*")[1];
        }
      }).catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    
  },
  created() {
    this.getuserDate();
    }
    
  }
</script>

<style scoped>
.thecenterbody{
  height: 160px;
  width: 78%;
  margin: 0 auto;
  margin-top: 100px;
  box-shadow: 7px 15px 40px #dfe3e3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.thecenterbody img {
  height: 100px;
  width: 100px;
  border-radius:10%;
  margin-left: 30px;
  margin-top: 30px;
  margin-right: 30px;
}
.thecenterbody h3 {
  font-size: 16px;
  margin-top: 30px;
}
.thecenterbody span {
  font-size: 16px;
  font-weight: 500;
  color: #87CEFA;
  
}
/* 取消menu的右侧边框 */
.el-menu {
  border: none;
}
.spanicon .el-icon{
  font-size: 24px;
  color: #FFD700;
  margin-top: 5px;
  vertical-align: bottom;
}
.thecenterbody p {
  font-size: 14px;
  color: grey;
}
.el-aside {
  margin-left: 12%;
  margin-top: 230px;
  height: 450px;
  /* background-color: aqua; */
  box-shadow: 7px 15px 40px #c0d4d4;
  overflow-x: hidden;
}
.person_body_list {
  width: 100%;
  height: 40px;
  margin-top: 25px;
  margin-left: 45px;
  font-size: 22px;
  font-weight: 400;
  background-image: -webkit-linear-gradient(
    left,
    rgb(42, 134, 141),
    #e9e625dc 20%,
    #3498db 40%,
    #e74c3c 60%,
    #09ff009a 80%,
    rgba(82, 196, 204, 0.281) 100%
  );
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.el-menu-item {
  margin-left: 20px;
}

.el-main {
  margin-top: 230px;
  margin-right: 12%;
  margin-left: 30px;
  height: 450px;
  /* background-color: #dfe3e3; */
  box-shadow: 7px 15px 40px #bfd4d4;
}
</style>